<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>蛇年</title>
  <link rel="icon" type="image/x-icon" href="img/1.ico"/><!-- 图片要ico格式才能显示 -->

  <!-- 引入 Swiper 的 CSS -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

  <style>
    /* 使 body 和 html 占据整个视口 */
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      overflow: hidden; /* 防止滚动条出现 */
      font-family: 'Arial', sans-serif;
      /* background: linear-gradient(135deg, #4ac9ff, #ffc3a0); */
	  background-image: url('img/6.jpg');/* 替换为你自己的图片路径 */
    }

    /* 文字内容 */
    .content {
      position: absolute; /* 绝对定位，确保文字在图片之上 */
      z-index: 1; /* 设置较高的 z-index，确保文字在图片之上 */
      top: 50%; /* 垂直居中 */
      left: 50%; /* 水平居中 */
      transform: translate(-50%, -50%); /* 精确居中 */
      color: white; /* 可选：设置文字颜色为白色，以便在深色图片上可见 */
      background-color: rgba(0, 0, 0, 0.5); /* 可选：添加半透明背景，增强可读性 */
      text-align: center; /* 居中文本 */
      padding: 20px; /* 添加一些内边距 */
	  font-family:'宋体';
		  }

    /* Swiper 容器 */
    .swiper-container {
      position: fixed; /* 固定定位，覆盖整个视口 */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0; /* 确保图片在文字之下 */
    }

    /* Swiper 幻灯片 */
    .swiper-slide {
      display: flex;
      justify-content: flex-start; /* 使图片左对齐 */
      align-items: center; /* 垂直居中对齐 */
      width: 100%;
      height: 100%;
      overflow: hidden; /* 防止图片超出容器 */
    }

    /* 图片样式 */
    .swiper-slide img {
      max-width: 100%; /* 确保图片不超过容器宽度 */
      height: 90%; /* 保持图片的宽高比 */
      object-fit: cover; /* 确保图片覆盖整个区域 */
    }

    /* 倒计时容器 */
    .countdown-container {
      text-align: center;
      color: white;
    }

    /* 倒计时 */
    .countdown {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
    }

    .time-unit {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 2em;
    }

    .time-unit small {
      font-size: 0.5em;
      margin-top: 5px;
    }

    #message {
      margin-top: 20px;
      font-size: 1.5em;
    }
	.background-gif {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  z-index: -1;
	}/* 动态图片 */
  </style>

  <!-- 引入 Swiper 的 JS -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>

<body>
	<!-- 动态背景 -->
	<img class="background-gif" src="img/6.ipg" alt="动态背景" />
	
  <!-- 文字内容 -->
  <div class="content">
    <h1>距离蛇年还有</h1>
    <div class="countdown">
      <div class="time-unit">
        <span id="days">00</span>
        <small>天</small>
      </div>
      <div class="time-unit">
        <span id="hours">00</span>
        <small>小时</small>
      </div>
      <div class="time-unit">
        <span id="minutes">00</span>
        <small>分钟</small>
      </div>
      <div class="time-unit">
        <span id="seconds">00</span>
        <small>秒</small>
      </div>
    </div>
    <p id="message"></p>
  </div>

  <!-- Swiper 容器 -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <!-- 第一张图片 -->
      <div class="swiper-slide">
        <img src="img/1.jpeg" alt="图片1">
      </div>
      <!-- 第二张图片 -->
      <div class="swiper-slide">
        <img src="img/2.jpg" alt="图片2">
      </div>
    </div>

    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <script>
    // 定义一个函数来更新倒计时
    function updateCountdown() {
      // 获取下一年1月1日的日期
      const newYear = new Date(new Date().getFullYear() + 1, 0, 1);
      
      // 获取当前时间
      const now = new Date();
    
      // 计算剩余时间（以毫秒为单位）
      const diff = newYear - now;
    
      // 如果剩余时间小于等于0，表示新年已经到来
      if (diff <= 0) {
        // 显示“新年快乐！”消息
        document.getElementById('message').innerText = '新年快乐！';
        
        // 停止倒计时
        clearInterval(countdownInterval);
        return;
      }
    
      // 计算剩余的天数、小时、分钟和秒数
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);
    
      // 更新页面上的时间显示
      document.getElementById('days').innerText = days.toString().padStart(2, '0');
      document.getElementById('hours').innerText = hours.toString().padStart(2, '0');
      document.getElementById('minutes').innerText = minutes.toString().padStart(2, '0');
      document.getElementById('seconds').innerText = seconds.toString().padStart(2, '0');
    }
    
    // 每秒调用一次 updateCountdown 函数，以更新倒计时
    const countdownInterval = setInterval(updateCountdown, 1000);
    
    // 立即调用一次 updateCountdown，以确保首次加载时显示正确的时间
    updateCountdown();

    // 初始化 Swiper
    var swiper = new Swiper('.swiper-container', {
      loop: true, // 循环模式
      autoplay: { // 自动播放
        delay: 3000, // 每 3 秒切换一次
        disableOnInteraction: false, // 用户交互后继续自动播放
      },
      pagination: { // 分页器
        el: '.swiper-pagination',
        clickable: true, // 分页器可点击
      },
      navigation: { // 导航按钮
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html>